<template>
	<view class="content">
		<u-navbar leftIconSize="40" title="诺克斯球场" :autoBack="true"> </u-navbar>

		<!--收益  -->
		<view style="margin-top: 20%;" class="inputBox padding20-40">
			<u--text bold lineHeight="60" size="33" text="收益统计"></u--text>
			<u-divider></u-divider>
			<view class="space-around">
				<view>
					<u--text align="center" color="#888693" lineHeight="50" size="23" text="累计场次"></u--text>
					<u--text bold align="center" lineHeight="80" size="30" text="100"></u--text>
				</view>
				<view>
					<u--text align="center" color="#888693" lineHeight="50" size="23" text="累计收益"></u--text>
					<u--text bold align="center" lineHeight="80" size="30" text="2W"></u--text>
				</view>
				<view>
					<u--text align="center" color="#888693" lineHeight="50" size="23" text="订场率"></u--text>
					<u--text bold align="center" lineHeight="80" size="30" text="90%"></u--text>
				</view>
			</view>
		</view>

		<!-- 球场设置 -->
		<view @click="toStadiumSetUp()" class="setBox">
			<text>球场设置</text>
		</view>

		<!-- 日历 -->
		<view class="inputBox padding20-40">
			<u-calendar round="20" :show="show"></u-calendar>
		</view>

		<!-- 球场设定 -->
		<view class="padding20-40 space-between margin-top-3">
			<u--text size="30" text="球场设定"></u--text>
			<view style="checkdBox">
				<u--text :iconStyle="{'font-size':'20rpx'}" suffixIcon="arrow-down-fill" size="20" text="5人场"></u--text>
			</view>
		</view>

		<view class="setBox" style="background: #E8EDFF;box-shadow: none;">
			<text>5人场</text>
		</view>

		<!-- 冻结场地 -->
		<view class="teamBox padding10-40">
			<view>
				<view class="margin-top-2 space-between">
					<view class="teamInfoTag">
						<u--text align="center" size="20" color="#B8B6BE" text="报名人数"></u--text>
						<u--text lineHeight="50" align="center" bold size="30" text="14"></u--text>
					</view>

					<view class="teamInfoTag">
						<u--text align="center" size="20" color="#B8B6BE" text="球队评级"></u--text>
						<u--text lineHeight="50" align="center" bold size="30" text="菜鸟"></u--text>
					</view>
				</view>

				<View style="width: 90%;" class="inputBox space-between padding10-30">
					<view class="flex">
						<u-icon size="80" name="lock-fill" color="#F1F1F2"></u-icon>
						<u--text size="30" text="冻结"></u--text>
					</view>
					<view class="stadiumCheckBox">
						<text>2号场</text>
						<text>|</text>
						<text>5号场</text>

					</view>
				</View>

				<view @click="setShow = true" class="addTeam margin-top-5">
					<u--text color="#ffffff" align="center" size="30" text="设置"></u--text>
				</view>
			</view>

		</view>

		<!-- 球局列表 -->

		<view class="ballGame">
			<view class="padding10-40 space-between">
				<view>
					<u--text size="35" bold text="教个朋友局"></u--text>
					<view class="margin-top-2" style="display: flex;">
						<view style="margin-right: 3%;" v-for="item in 3" class="tag">养生局</view>
					</view>
				</view>


				<view>
					<view>
						<view class="tag">暂未成局</view>
					</view>
					<view class="padding10-30" style="width: 150rpx;">
						<u-button iconColor="#F0635A" icon="thumb-up-fill" size="mini" color="#F0635A4D" shape="circle"
							text="我参加"></u-button>
					</view>
				</view>
			</view>

			<view>
				<view class="padding10-40">

					<view>
						<view class="flex padding15-0">
							<u-icon name="woman" size="28"></u-icon>
							<text class="distance">时间：本周六16：00-18：00</text>
						</view>
						<view class="flex padding15-0">
							<u-icon name="woman" size="28"></u-icon>
							<text class="distance">地点：12.6km | 诺克求大球场</text>
							<u-icon name="woman" size="28"></u-icon>
						</view>
						<view class="flex padding15-0">
							<u-icon name="woman" size="28"></u-icon>
							<text class="distance">类型：足球（7人制）</text>
						</view>
						<view class="flex padding15-0">
							<u-icon name="woman" size="28"></u-icon>
							<text class="distance">收费：￥400（AA制）</text>
						</view>
					</view>
				</view>
			</view>

			<view class="gameInfo" style="width: 93%; height: auto; background-color: #F2F3F5; margin: 2% auto;">
				<view class="padding10-30">
					<u--text size="20"
						text="00:01:44.501项目'footballBookingApp' 编译成功。前端运行日志，请另行在小程序开发工具的控制台查看00:01:44.501 项目 'footballBookingApp' 编译成功。"></u--text>
				</view>
			</view>

			<view class="space-between margin-top-2">
				<view class="padding10-30" style="display: flex;">
					<view v-for="item in 6" style="margin-right: 2%">
						<u--image width="26px" height="26px" radius="8px"
							src="https://cdn.uviewui.com/uview/album/1.jpg"></u--image>
					</view>
				</view>
				<view class="padding10-30">
					<text>报名 12/</text>
					<text>16-30</text>
				</view>
			</view>
		</view>

		<!-- 弹出层 -->
		<u-popup closeable round="30px" mode="bottom" :show="setShow" @close="close" @open="open">
			<view style="padding-top: 50rpx;">
				<view style="padding-bottom: 30rpx;">
					<u--text bold align="center" size="30" text="5人场 8-5 10:00-12:00"></u--text>
				</view>
				<view class="fromBox space-between">
					<view style="display: flex;align-items: center;">
						<u--text bold size="30" text="选择场地"></u--text>
					</view>
					<view @click="stadiumShow = true,setShow = false " class="flex">
						<u--text size="25" text="5人场、1号场"></u--text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>

				<view class="fromBox space-between">
					<view style="display: flex;align-items: center;">
						<u--text bold size="30" text="冻结场地"></u--text>
					</view>
					<view style="display: flex;align-items: center;">
						<u-switch v-model="value"></u-switch>
					</view>
				</view>

				<view class="fromBox space-between">
					<view style="display: flex;align-items: center;">
						<u--text bold size="30" text="设置价格"></u--text>
					</view>
					<view style="display: flex;align-items: center;">
						<u--input placeholder="请输入内容" border="bottom" v-model="price"></u--input>
					</view>
				</view>

				<view class="fromBox space-between">
					<view style="display: flex;align-items: center;">
						<u--text bold size="30" text="选择场地"></u--text>
					</view>
					<view class="flex">
						<u--text size="25" text="9折"></u--text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>

		<u-picker @confirm="stadiumConfirm()" @cancel="stadiumCancel()"
		 @close="stadiumClose()" :show="stadiumShow" :columns="columns"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stadiumShow: false,
				show: false,
				setShow: false,
				value: true,
				price: 100,
				columns: [
					['中国', '美国', '日本']
				],

			}
		},
		methods: {
			close() {
				this.setShow = false
			},
			// 跳转球场设置
			toStadiumSetUp() {
				uni.navigateTo({
					url: "/pages/stadium/stadiumSetUp"
				})
			},
			// 已经选择
			stadiumConfirm(){
				this.stadiumShow = false
				this.setShow = true
			},
				// 选择场地取消
			stadiumCancel(){
				this.stadiumShow = false
				this.setShow = true
			},
			// 选择场地关闭
			stadiumClose(){
				this.stadiumShow = false
				this.setShow = true
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
		padding-bottom: 100rpx;
	}

	.inputBox {
		width: 80%;
		height: auto;
		border-radius: 16px;
		min-height: 80rpx;
		opacity: 1;
		background: #FFFFFF;
		box-shadow: 0px 10px 20px 0px rgba(90, 90, 90, 0.1);
		margin: 5% auto 0 auto;
		border: 1px solid #EEEEEE;
	}

	.setBox {
		width: 90%;
		height: 100rpx;
		border-radius: 12px;
		opacity: 1;
		/* 主色 */
		/* 样式描述：足球小程序 */
		background: #4A43EC;
		box-shadow: 0px 10px 35px 0px rgba(111, 126, 201, 0.25);
		margin: 5% auto 0 auto;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.checkdBox {
		width: 70px;
		height: 32px;
		border-radius: 6px;

		/* 六级文字 */
		background: #E7E7E9;

	}

	.teamBox {
		padding-bottom: 30rpx;
		border: 1rpx solid #EEEEEE;
		width: 80%;
		height: auto;
		border-radius: 40rpx;
		min-height: 80rpx;
		opacity: 1;
		background: #FFFFFF;
		margin: 4% auto;
		background: #E8EDFF;
	}

	.teamInfoTag {
		margin-right: 0%;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 48%;
		border-radius: 16rpx;
		height: auto;
		padding: 3% 0;
		background-color: white;
		border: 1px solid #EEEEEE;
		box-shadow: 0px 5px 20px 0px rgba(211, 209, 216, 0.3);
	}

	.addTeam {
		width: 100%;
		height: auto;
		background: #4A43EC;
		display: flex;
		justify-content: center;
		border-radius: 20rpx;
		min-height: 100rpx;
		color: white;
	}

	.stadiumCheckBox {
		color: white;
		width: 40%;
		height: auto;
		border-radius: 16rpx;
		opacity: 1;
		background: #F0635A;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0 20rpx;
		font-size: 25rpx;
	}

	.ballGame {
		padding: 20rpx 0;
		width: 93%;
		height: auto;
		border-radius: 16.98px;
		opacity: 1;
		margin: 3% auto;
		background: #FFFFFF;
		box-shadow: 0px 2.12px 20px 0px rgba(83, 89, 144, 0.15);
	}

	.gameInfo {
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		border-radius: 24rpx;
		opacity: 1;
		background: #FFFFFF;
		box-sizing: border-box;
		margin: 0 7rpx;

	}

	.fromBox {
		padding: 0rpx 30rpx;
		width: 90%;
		height: 60px;
		border-radius: 15px;
		opacity: 1;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 1px solid #E5E5E5;
		margin: 3% auto;
	}
</style>